<!--征缴情况分析-->
<template>
  <div class="chart-box decision" :class="fullScreen?'decision-wrapper':''" >
    <div class="nav-top" :class="leftAnimate"  :style="{width:navWidth+ 'px',top:top+'px'}">
      <div class="nav-top-container">
        <h2 class="nav-top-title">征缴情况分析（{{insuranceName1}}）</h2>
        <div class="nav-top-item-box">
          <!--<span class="prev-btn el-icon-arrow-left" @click="goToPrev"></span>-->
          <!--<span class="next-btn el-icon-arrow-right" @click="goToNext"></span>-->
          <p class="nav-top-item-container">
            <a class="nav-top-item" :class="classNum==0?'nav-top-item-active':''" @click="goScroll(0)">缴费人数分析</a>
            <a class="nav-top-item" :class="classNum==1?'nav-top-item-active':''" @click="goScroll(1)">缴费水平分析</a>
            <a class="nav-top-item" :class="classNum==2?'nav-top-item-active':''" @click="goScroll(2)">单位及人员分析</a>
          </p>
        </div>
        <div class="top-operate">
          <span class="three-spot">...</span>
          <i></i>
          <svg class="all-close-btn icon-svg" v-if="!fullScreen" @click="closeAll"  viewBox="0 0 612 792">
            <path :d="svgPath.closeFullScreen"/>
          </svg>
        </div>
      </div>
    </div>
    <div>
      <div class="chart-item" :style="{height:height+'px'}">
        <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
        <div class="item-box-left" v-if="filter" :style="{width:width+ 'px'}">
          <Chart1  v-if="isShow"
                   :isChange="isChange"
                   :filter="filter"
                   :insuranceText="insuranceName"
                   :insuranceCode="insuranceType"
                   :pageChange = 'pageChange'>
          </Chart1>
        </div>
        <div class="item-box-right" v-if="filter" :style="{width:width+ 'px'}">
          <Chart2  v-if="isShow"
                   :isChange="isChange"
                   :filter="filter"
                   :insuranceText="insuranceName"
                   :insuranceCode="insuranceType"
                   :pageChange = 'pageChange'>
          </Chart2>
        </div>
      </div>
      <div class="chart-item" v-if="num>0" :style="{height:height+'px'}">
        <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
        <div class="item-box-left" v-if="filter" :style="{width:width+ 'px'}">
          <Chart3  v-if="isShow"
                   :isChange="isChange"
                   :filter="filter"
                   :insuranceText="insuranceName"
                   :insuranceCode="insuranceType"
                   :pageChange = 'pageChange'>
          </Chart3>
        </div>
        <div class="item-box-right" v-if="filter" :style="{width:width+ 'px'}">
          <Chart4  v-if="isShow"
                   :isChange="isChange"
                   :filter="filter"
                   :insuranceText="insuranceName"
                   :insuranceCode="insuranceType"
                   :pageChange = 'pageChange'>
          </Chart4>
        </div>
      </div>
      <div class="chart-item" v-if="num>1" :style="{height:height+'px'}">
        <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
        <div class="item-box-left" v-if="filter" :style="{width:width+ 'px'}">
          <Chart5  v-if="isShow"
                   :isChange="isChange"
                   :filter="filter"
                   :insuranceText="insuranceName"
                   :insuranceCode="insuranceType"
                   :pageChange = 'pageChange'>
          </Chart5>
        </div>
        <div class="item-box-right" v-if="filter" :style="{width:width+ 'px',display:'none'}">
          <Chart4  v-if="isShow"
                   :isChange="isChange"
                   :filter="filter"
                   :insuranceText="insuranceName"
                   :insuranceCode="insuranceType"
                   :pageChange = 'pageChange'>
          </Chart4>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {svgPath,quitFullScreen} from "../../assets/js/utils";
  import {getSearchItems} from '../../api/api'
  import Chart1 from './social-fund-component/chartItem1'
  import Chart2 from './social-fund-component/chartItem2'
  import Chart3 from './social-fund-component/chartItem3'
  import Chart4 from './social-fund-component/chartItem4'
  import Chart5 from './social-fund-component/chartItem5'
  import Chart6 from './social-fund-component/chartItem6'

  export default {
    props: ['isChange','fullScreen','isCollapse','pageChange'],
    components:{
      Chart1,
      Chart2,
      Chart3,
      Chart4,
      Chart5,
      Chart6
    },
    activated(){
      if(sessionStorage.getItem('isPrev')==1){
        this.goToTwo();
        sessionStorage.removeItem('isPrev')
      }
      let  that = this;
      let  val = this.height;
      document.querySelector('.el-main').onscroll = function(e){
        e = e || window.event;
        let scrollTop = e.target.scrollTop;
        if(that.num<parseInt((scrollTop)/val)+1){
          if(!that.canChangeStyle){
            that.num = parseInt(scrollTop/val)+1;
          }
        }
        if(scrollTop==0){
          that.classNum = 0
        }else{
          if(!that.canChangeStyle){
            that.classNum = parseInt((scrollTop-11)/val)+1
          }
        }
      }
    },
    data() {
      return{
        isGoOther:false,
        insuranceName1:'职工五险',
        leftAnimate:'',
        svgPath:svgPath,
        filter: null,
        width: 0,
        isShow:true,
        left: 80,
        top: 70,
        height: 500,
        navWidth: 800,
        chartHeight:445,
        num:0,
        nextNum:0,
        classNum:0,
        insuranceType:1000,
        insuranceName:'养老',
        canChangeStyle:false
      }
    },
    watch:{
      pageChange(val){
        this.isGoOther = true;
        this.isGoOther = false;
        document.querySelector('.el-main').scrollTop = 0 + 'px';
        let that = this;
        //根据获取的id值（险种id）渲染数据
        let id = that.$route.params.id;
        if(id==1000){
          that.insuranceType = id;
          that.insuranceName1 = '职工五险';
          if(that.filter){
            that.insuranceName = that.filter.nc.insuranceTypes[0].selectName;
          }
        }else{
          that.insuranceType = id;
          if(that.filter){
            that.filter.nc.insuranceTypes.map((item,index)=>{
              if(item.selectId == id){
                that.insuranceName = item.selectName;
                that.insuranceName1 = item.selectName;
              }
            })
          }
        }
        // this.goTop();
      },
      isCollapse(val){
        let bodyWidth = document.querySelector('body').clientWidth;
        if(!val){
          this.navWidth = bodyWidth - 200;
          this.leftAnimate = 'open-left-menu'
        }else{
          this.navWidth = bodyWidth - 44;
          this.leftAnimate = 'close-left-menu'
        }
      },
      isChange(){
        setTimeout(()=>{
          this.getChartItem();
        },100)
      },
      height(val){
        let  that = this;
        document.querySelector('.el-main').onscroll = function(e){
          e = e || window.event;
          let scrollTop = e.target.scrollTop;
          if(that.num<parseInt((scrollTop)/val)+1){
            if(!that.canChangeStyle){
              that.num = parseInt(scrollTop/val)+1;
            }
          }
          if(scrollTop==0){
            that.classNum = 0
          }else{
            if(!that.canChangeStyle){
              that.classNum = parseInt((scrollTop-11)/val)+1
            }
          }
        }
      },
    },
    mounted() {
      let that = this;
      this.getChartItem();
      if(sessionStorage.getItem('isPrev')==1){
        this.goToTwo();
        sessionStorage.removeItem('isPrev')
      }
      setTimeout(()=>{
        this.isShow = true;//因为图表的高度是动态获取的，一开始并没有高度值，无高度值时不能渲染图表，故要等高度赋值后才渲染图表。
      },1)
      //获取筛选数据
      getSearchItems('init/initInput').then((res) => {
        if (res.code == 0) {
          this.filter = res.data;
          this.getDefaultData();
        }
      });
      document.onkeydown=function(event){
        if(event.ctrlKey){
          if(event.keyCode=='187'||event.keyCode=='189'||event.keyCode=='48'){
            that.num = 2;
          }
        }
      }
    },
    methods: {
      getDefaultData(){
        let that = this;
        //根据获取的id值（险种id）渲染数据
        let id = that.$route.params.id;
        if(id==1000){
          that.insuranceType = id;
          that.insuranceName1 = '职工五险';
          if(that.filter){
            that.insuranceName = that.filter.nc.insuranceTypes[0].selectName;
          }
        }else{
          that.insuranceType = id;
          if(that.filter){
            that.filter.nc.insuranceTypes.map((item,index)=>{
              if(item.selectId == id){
                that.insuranceName = item.selectName;
                that.insuranceName1 = item.selectName;
              }
            })
          }
        }
      },
      closeAll(){
        quitFullScreen();
      },
      //点击面包屑效果
      goScroll(num,timeVal){
        // timeVal = timeVal || 100;
        timeVal = 60;
        this.canChangeStyle = true;
        this.classNum = num;
        if(this.num<num){
          this.num = num;
        }
        let scrollTop = document.querySelector('.el-main').scrollTop;
        let goTop = this.height*num;
        let height = Math.abs(goTop-scrollTop);
        let spit = height/1000;
        let time = 0;
        let timer = setInterval(()=>{
          time+=100;
          if(time<=1000){
            if(scrollTop<goTop){
              document.querySelector('.el-main').scrollTop = scrollTop + spit*time;
            }else{
              document.querySelector('.el-main').scrollTop = scrollTop - spit*time;
            }
          }else{
            this.canChangeStyle = false;
            clearInterval(timer)
          }
        },timeVal)
      },
      //动态设置宽高
      getChartItem(){
        let height = document.querySelector('body').clientHeight;
        let barHeight = 70;
        let sideWidth = 44;
        let bodyWidth = document.querySelector('body').clientWidth;
        let top = 70;
        if (document.querySelector('.el-header')) {
          barHeight = document.querySelector('.el-header').clientHeight;
          if(document.querySelector('.el-aside')){
            sideWidth = document.querySelector('.el-aside').clientWidth;
          }
        } else {
          barHeight = 0;
          sideWidth = 0;
          top=0;
        }
        this.top = top;
        this.left = sideWidth;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight -54 ;
        //每一个图表块的宽度
        let width = 1000;
        if(document.querySelector('.chart-box')){
          width = document.querySelector('.chart-box').clientWidth;
        }
        this.width = (width - 44) / 2;
        //nav-top left值
      },
      goToThree(){
        this.goScroll(2,0.01)
      },
      goToTwo(){
        this.goScroll(1,0.01)
      },
      goTop(){
        this.goScroll(0,0.01)
      },
    },
    beforeRouteEnter(to,from,next){
      next()
    },
    beforeRouteUpdate(to,from,next){
      this.isGoOther = true;
      next()
    },
    beforeRouteLeave (to, from, next) {
      if(to.name=='detail'){
        this.isGoOther = false;
      }else{
        this.isGoOther = true;
        this.num = 0;
        this.nextNum = 0;
        this.classNum = 0;
        // this.goScroll(0,0.01)
      }
      next()
    },
  }
</script>
<style scoped>
  @import '../../assets/css/decision.css';
</style>
